<!DOCTYPE html>
<head> 
<meta charset="utf-8"> 
 <title>未知高度子元素居中于未知高度父元素</title>
    <!--方法1：transform absolute positive-->
 <style>
 .box {
    position: relative;
    width:200px;
    height:200px;
    background-color:red}
                
.box div {
    background-color: blue;
    position: absolute;
    width:100px;
    height:100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>
</head>
<body>
        <div class="box">
        　　<div> </div>
        </div>
</body>
</html>